<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子向父传递数值</title>
  </head>
  <body>
    <pre></pre>
    <div class="box">
      <jack></jack>
      <rose></rose>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      // 事件中心
      var heat = new Vue()

      Vue.component('jack', {
        data: function () {
          return {
            value: 'jack',
          }
        },
        template: `
        <div>jack
            <button @click='jack'>{{value}} </button>
        </div>

        `,
        methods: {
          jack(val) {
            heat.$emit('jack', 'jack')
          },
        },
      })

      Vue.component('rose', {
        data: function () {
          return {
            value: 'rose',
          }
        },
        template: `
        <div>rose
            <button>{{value}} </button>
        </div>
        `,
        methods: {},
        mounted() {
          // heat.$on()=>{},
          heat.$on('jack', (jack) => {
            console.log(jack)
          })
        },
      }),
        new Vue({
          el: '.box',
          data: {
            value: 10,
          },
          methods: {
            fun(value) {
              console.log('我是son' + value)
              // return
            },
          },
        })
    </script>
  </body>
</html>
